<template>
  <div class="body" :style="{height: height + 'px'}">
    <van-sticky :offset-top="1">
      <div id="header" class="header aui-bg-red aui-padded-10"></div>
    </van-sticky>
    <div id="main" class="m_cont">
        <div style="position: fixed;top: 25px;left: 0;z-index: 999">
          <div id="close" class="close aui-padded-15 aui-padded-t-0">
              <div class="close_cont aui-bg-red aui-text-center" @click="back">
                  <i class="iconfont icon-fanhui aui-text-f aui-ftn18"></i>
              </div>
          </div>
        </div>
        <div class="aui-text-center m_content">
            <div class="logo aui-ftn20">
                <img src="../../assets/logo.png" alt="">
            </div>
            <div class="aui-ftn13 aui-text-6 aui-margin-15">海量商品免费试用</div>
            <div class="aui-ftn14 aui-text-f aui-text-center aui-font-weight index_btn aui-bg-red" @click="fnOpenIndex">进入首页</div>
        </div>
    </div>

    <div class="fixed aui-bg-red" id="fixed">
        <div style="padding: 20px 0;position: relative" >
            <div class="image_one"></div>
            <div class="image_two"></div>
            <a class="aui-btn aui-btn-block aui-text-red aui-bg-f" style="width: 65%;margin: 30px auto;border-radius: 25px" :href="app.android">
              <span class="iconfont icon-anzhuo aui-margin-r-10 aui-ftn18"></span>
              <span class="aui-font-weight aui-ftn16">Android版本下载</span>
            </a>
            <a class="aui-btn aui-btn-block aui-text-red aui-bg-f" style="width: 65%;margin: 30px auto;border-radius: 25px" :href="app.ios">
              <span class="iconfont icon-pingguo aui-margin-r-10 aui-ftn18"></span>
              <span class="aui-font-weight aui-ftn16">IOS版本下载</span>
            </a>
        </div>
    </div>


  </div>
</template>

<script>
  import Index from '../../service/index.js'
  export default {
    data () {
      return {
        app: {},
        height: 0
      }
    },
    mounted() {
      this.height = document.documentElement.clientHeight < 400 ? 400 : document.documentElement.clientHeight;
      this.init()
    },
    methods: {
      init: function() {
        Index.fnGetDownload().then(ret => {
          if (ret && ret.status) {
              this.app = ret;
          }
        })
      },
      fnOpenIndex: function() {
          this.utils.fnOpenCommon(this, {name: 'home'})
      }
    }
  }
</script>

<style scoped>
  div.body {
    background-image: url('../../assets/download/beijing.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff!important;
    width: 100%;
    height: 100%;
    position: relative;
  }
div.close {
    position: fixed;
    left: 0;
    z-index: 999;
}
div.close div.close_cont {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
}
div.m_cont {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 40%;
}
div.m_content {
    position: absolute;
    top: 12.5%;
    right: 0;
    left: 0;
    z-index: 88;
}
img {
    width: 100%;
    vertical-align: middle;
}
div.logo {
    padding: 66px 0 15px 0;
}
div.logo img {
    width: 76px;
    height: 76px;
    margin: auto;
}
div.index_btn {
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    margin: 19px auto 0 auto;
}
div.header {
    top: 0;
    z-index: 9999;
}
div.fixed {
    top: 60%;
    bottom: 0;
    z-index: 99;
}
div.image_one, div.image_two {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    z-index: 66;
}
div.image_one {
    width: 108px;
    height: 223px;
    background-image: url('../../assets/download/zhiwu2.png');
    left: 0;
    top: -100%;
}
div.image_two {
    width: 112px;
    height: 115px;
    background-image: url('../../assets/download/zhiwu.png');
    right: 0;
    top: -50%;
}
</style>
